<template>
  <div class="search">
    <!-- 搜索框 -->
    <van-search
      v-model="keyword"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @input="resGe"
    />
    <!-- 热门历史组件 -->
    <HistoryHot
    v-if="a"
      :searchHotData="searchHotData"
      :searchHistoryData="searchHistoryData"
      @goSearch="resFn"
    ></HistoryHot>
    <div v-else>
      <!-- 下拉菜单 -->
      <Dropoment
        :filterCategory="filterCategory"
        @res1="changePriceFn"
        @res2="changeKindFn"
      ></Dropoment>
      <!-- 商品列表组件 -->
      <GoodsList :goodsList="goodsList"></GoodsList>
    </div>
  </div>
</template>
<script>
// 引入下来菜单组件
import Dropoment from "@/components/Dropoment.vue";
// 引入商品搜索接口
import { searchGoods, GetPopupData } from "@/utils/http";
// 引入商品列表组件
import GoodsList from "@/components/GoodsList";
// 历史记录
import HistoryHot from "@/components/HistoryHot";
export default {
  name: "",
  props: [""],
  data() {
    return {
      a:true,
      keyword: "", //搜索关键字
      page: 1, //默认页数
      size: 100, //每页条数
      order: "desc", //价格排序 desc由高到低  asc 由低到高
      categoryId: 0, //类别id 全部  居家等等...
      sort: "id", //排序方式 根据分类id 还是价格price
      goodsList: [], //商品列表数据
      filterCategory: [], //所有的类别
      searchHistoryData: [], // 历史记录列表
      searchHotData: [], // 热门搜索列表
    };
  },
  components: {
    Dropoment,
    GoodsList,
    HistoryHot,
  },
  created() {
    // console.log(this);
    // 初始化 获取商品
    this.getData();
    GetPopupData().then((res) => {
      console.log(res);
      this.searchHotData = res.data.data.hotKeywordList; // 热门搜索列表
      this.searchHistoryData = res.data.data.historyKeywordList; // 历史记录列表
      // console.log(this.searchHotData);
      // console.log(this.searchHistoryData);
    });
  },
  methods: {
    resFn(m) {
      console.log(m);
      this.keyword = m;
      // this.onSearch();
      this.getData()
      // this.a = false
    },
    resGe(){},
    restFh() {},
    // 获取商品列表
    getData() {
      let params = {
        keyword: this.keyword, // 搜索的关键字
        page: this.page, // 默认页数
        size: this.size, // 每页数据的条数
        order: this.order, // desc 由高到低  asc 由低到高
        categoryId: this.categoryId, // 商品类别id  全部 居家 服装  配件 ....
        sort: this.sort, // 排序方式 根据分类id 还是价格price
      };
      searchGoods(params)
        .then((res) => {
          // console.log(res);
          this.goodsList = res.data.data.goodsList;
          this.filterCategory = res.data.data.filterCategory;
          //   console.log(this.filterCategory);
          // 将filterCategory 这个数组中的所有name 换成text,将id 换成value属性 利用字符串中的replace方法
          this.filterCategory = JSON.parse(
            JSON.stringify(this.filterCategory)
              .replace(/name/g, "text")
              .replace(/id/g, "value")
          );
        })
        .catch((e) => {});
    },
    onSearch() {
      // 点击搜索触发
      // 初始化 获取商品
      this.getData();
      this.a = false
    },
    onCancel() {
      // 点击取消触发
      this.$router.go(-1);
    },
    changePriceFn(m) {
      // console.log(m);
      // 执行切换价格排序触发的事件
      this.order = m;
      this.sort = "price";
      // 重新修改完参数
      this.getData();
    },
    changeKindFn(n) {
      // 切换类别触发的事件
      this.categoryId = n;
      this.sort = "id";
      // 根据修改完的参数,重新获取数据
      this.getData();
    },
    
  },
};
</script>
<style scoped>
</style>